<template>
  <div class="upload-container">
    <el-upload
      v-model:file-list="fileList"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :auto-upload="false"
      :limit="5"
      :on-exceed="handleExceed"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  </div>
  <div class="submit-button-wrapper">
    <el-button type="primary" @click="handleRequest" round>提交</el-button>
  </div>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
const fileList = ref([]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const limit = ref(1);

/**
 * 移除
 * @param uploadFile
 */
const handleRemove = (uploadFile) => {
  console.log("uploadFile", uploadFile);
};
/**
 * 自定义上传
 * @param options
 */
const handleRequest = () => {
  fileList.value.forEach((file) => {
    console.log("文件信息：", file);
  });
};
/**
 * 图片数量限制
 */
const handleExceed = () => {
  ElMessage({
    message: "超出最大数量",
    type: "warning",
  });
};
/**
 * 预览
 * @param uploadFile
 */
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};
</script>
<style lang="scss" scoped>
.submit-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
